import React, { useState } from 'react';
import { Steps, Card, Typography, Divider, Tag, Row, Col, Space, Select, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import { ShopOutlined, ToolOutlined, ShoppingCartOutlined, InboxOutlined, DatabaseOutlined, HomeOutlined, CloseOutlined } from '@ant-design/icons';
import Step2MaterialsList from './Step2MaterialsList';
import Step3PurchaseRequest from './Step3PurchaseRequest';
import Step4InboundMaterials from './Step4InboundMaterials';

const { Step } = Steps;
const { Title, Paragraph } = Typography;
const { Option } = Select;

const MainSteps = () => {
    const [current, setCurrent] = useState(0);
    const [selectedProject, setSelectedProject] = useState(null);
    const [selectedWarehouse, setSelectedWarehouse] = useState(null);
    const navigate = useNavigate();

    // 模拟数据
    const projects = [
        { id: 1, name: '城市花园项目一期工程', remark: '2023.6开工' },
        { id: 2, name: '城市地铁项目二期工程', remark: '政府项目' }
    ];

    const warehouses = [
        { id: 1, name: "主仓库", projectId: 1 },
        { id: 2, name: "辅仓库", projectId: 1 },
        { id: 3, name: "地铁仓库", projectId: 2 }
    ];

    const handleProjectChange = (value) => {
        const project = projects.find(p => p.id === value);
        setSelectedProject(project);
        setSelectedWarehouse(null);
    };

    const handleWarehouseChange = (value) => {
        const warehouse = warehouses.find(w => w.id === value);
        setSelectedWarehouse(warehouse);
    };

    const clearSelection = () => {
        setSelectedProject(null);
        setSelectedWarehouse(null);
    };

    const steps = [
        {
            title: '选择项目仓库',
            icon: <ShopOutlined />,
            content: (
                <div>
                    {/* 提示信息 */}

                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 20 }}>
                        <div>
                            <Title level={4} style={{ marginBottom: 8 }}>选择项目仓库</Title>
                            <Paragraph style={{ color: '#666', marginBottom: 0 }}>
                                选择您要操作的项目和仓库
                            </Paragraph>
                        </div>
                        <Button type="primary" onClick={() => navigate("/project-management")}>
                            管理项目
                        </Button>
                    </div>

                    {/* 紧凑的选择器区域 */}
                    <Card
                        style={{
                            width: '100%',
                            border: '1px solid #e8e8e8',
                            background: '#fafafa'
                        }}
                    >
                        <Row gutter={16} align="middle">
                            <Col flex="none">
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    padding: '8px 12px',
                                    background: 'white',
                                    borderRadius: 6,
                                    border: '1px solid #d9d9d9',
                                    minWidth: 200
                                }}>
                                    <HomeOutlined style={{ color: '#1890ff', marginRight: 8 }} />
                                    <span style={{ color: '#666', marginRight: 8 }}>项目:</span>
                                    <Select
                                        style={{ flex: 1, minWidth: 200 }}
                                        placeholder="选择项目"
                                        value={selectedProject?.id}
                                        onChange={handleProjectChange}
                                        variant={false}
                                    >
                                        {projects.map(project => (
                                            <Option key={project.id} value={project.id}>
                                                <div>
                                                    <div>{project.name}</div>
                                                    {project.remark && (
                                                        <div style={{ fontSize: 12, color: '#999' }}>
                                                            {project.remark}
                                                        </div>
                                                    )}
                                                </div>
                                            </Option>
                                        ))}
                                    </Select>
                                </div>
                            </Col>

                            <Col flex="none">
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    padding: '8px 12px',
                                    background: 'white',
                                    borderRadius: 6,
                                    border: '1px solid #d9d9d9',
                                    minWidth: 200,
                                    opacity: selectedProject ? 1 : 0.6
                                }}>
                                    <DatabaseOutlined style={{ color: '#52c41a', marginRight: 8 }} />
                                    <span style={{ color: '#666', marginRight: 8 }}>仓库:</span>
                                    <Select
                                        style={{ flex: 1, minWidth: 120 }}
                                        placeholder={selectedProject ? "选择仓库" : "请先选择项目"}
                                        value={selectedWarehouse?.id}
                                        onChange={handleWarehouseChange}
                                        variant={false}
                                        disabled={!selectedProject}
                                    >
                                        {warehouses
                                            .filter(w => w.projectId === selectedProject?.id)
                                            .map(wh => (
                                                <Option key={wh.id} value={wh.id}>
                                                    {wh.name}
                                                </Option>
                                            ))}
                                    </Select>
                                </div>
                            </Col>

                            {(selectedProject || selectedWarehouse) && (
                                <Col flex="auto">
                                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
                                        <Space>
                                            {selectedProject && (
                                                <Tag
                                                    color="blue"
                                                    closable
                                                    onClose={() => {
                                                        setSelectedProject(null);
                                                        setSelectedWarehouse(null);
                                                    }}
                                                    style={{
                                                        margin: 0,
                                                        padding: '4px 8px',
                                                        borderRadius: 4
                                                    }}
                                                >
                                                    <HomeOutlined style={{ marginRight: 4 }} />
                                                    {selectedProject.name}
                                                </Tag>
                                            )}
                                            {selectedWarehouse && (
                                                <Tag
                                                    color="green"
                                                    closable
                                                    onClose={() => setSelectedWarehouse(null)}
                                                    style={{
                                                        margin: 0,
                                                        padding: '4px 8px',
                                                        borderRadius: 4
                                                    }}
                                                >
                                                    <DatabaseOutlined style={{ marginRight: 4 }} />
                                                    {selectedWarehouse.name}
                                                </Tag>
                                            )}
                                            <Button
                                                type="text"
                                                size="small"
                                                icon={<CloseOutlined />}
                                                onClick={clearSelection}
                                                style={{ color: '#999' }}
                                            >
                                                清除
                                            </Button>
                                        </Space>
                                    </div>
                                </Col>
                            )}
                        </Row>
                    </Card>


                </div>
            ),
        },
        { title: '材料清单', icon: <ToolOutlined />, content: <Step2MaterialsList /> },
        { title: '采购申请', icon: <ShoppingCartOutlined />, content: <Step3PurchaseRequest /> },
        { title: '入库材料', icon: <InboxOutlined />, content: <Step4InboundMaterials /> },
    ];

    return (
        <div style={{ background: '#f5f5f5', height: '100%' }}>
            <Card style={{
                height: 'calc(100vh - 70px - 6px)',
                borderRadius: 12,
                boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
                overflow: 'auto'
            }}>
                {selectedProject && selectedWarehouse && (
                    <div style={{
                        padding: '16px',
                        background: '#f0f7ff',
                        border: '1px solid #91d5ff',
                        marginBottom: '16px',
                        borderRadius: 6
                    }}>
                        <Space>
                            <span style={{ color: '#1890ff' }}>✓</span>
                            <span>已选择: <strong>{selectedProject.name}</strong> - <strong>{selectedWarehouse.name}</strong></span>
                        </Space>
                    </div>
                )}
                {/* 步骤条 */}
                <Steps current={current} onChange={setCurrent} responsive labelPlacement="vertical">
                    {steps.map((item, index) => (
                        <Step key={index} title={item.title} icon={item.icon} />
                    ))}
                </Steps>

                <Divider />

                {/* 内容区 */}
                <div style={{ marginTop: 24, minHeight: 300 }}>
                    {steps[current].content}
                </div>
            </Card>
        </div>
    );
};

export default MainSteps;